spb/clip-spboucher-ai

1import type { Metadata } from "next";2import Link from "next/link";3import { listSeries } from "@/lib/films";4import { dict, href, type Locale } from "@/lib/i18n";56export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {7  const locale = (await params).locale as Locale;8  return { title: dict(locale).nav.series, description: dict(locale).home.seriesSub, alternates: { canonical: href(locale, "/series"), languages: { en: "/series", fr: "/fr/series" } } };9}1011export default async function SeriesIndex({ params }: { params: Promise<{ locale: string }> }) {12  const locale = (await params).locale as Locale;13  const t = dict(locale);14  const series = await listSeries(locale);15  return (16    <div className="py-10">17      <h1 className="display text-5xl md:text-6xl">{t.nav.series}</h1>18      <p className="prose-film mt-3 text-lg">{t.home.seriesSub}</p>19      <ul className="mt-10 grid gap-4 sm:grid-cols-2">20        {series.map((s) => (21          <li key={s.slug}>22            <Link href={href(locale, `/series/${s.slug}`)} className="card group flex min-h-[180px] gap-5 overflow-hidden p-5 transition-colors hover:border-[var(--color-line)]">23              <div className="relative aspect-[9/16] w-24 shrink-0 overflow-hidden rounded-lg bg-[var(--color-stage)] ring-1 ring-[var(--color-line-soft)]">24                {s.cover ? <img src={s.cover} alt="" className="h-full w-full object-cover" loading="lazy" /> : <div className="grid h-full place-items-center"><span className="h-2 w-2 rounded-full" style={{ background: s.accent }} /></div>}25              </div>26              <div className="min-w-0">27                <p className="accent-text text-xs font-semibold uppercase tracking-[0.14em]" style={{ "--a": s.accent } as React.CSSProperties}>{t.film[s.kind as "fiction" | "factual" | "experimental"]} · {s.count > 0 ? `${s.count} ${t.seriesPage.episodes}` : t.seriesPage.upcoming}</p>28                <h2 className="display mt-2 text-3xl">{s.title}</h2>29                <p className="mt-2 text-sm leading-relaxed text-[var(--color-muted)]">{s.description}</p>30              </div>31            </Link>32          </li>33        ))}34      </ul>35    </div>36  );37}38